<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer {
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            /*指定动画名称*/
            animation-name: wyd2;
            /*动画持续时长*/
            animation-duration: 5s;
        }

        /*定义动画名称*/
        @keyframes wyd2 {
            /*起始帧，第一帧*/
            0% {
                /*0可以不写*/
                transform: translate(0);
                /*动画结束后，布局是黑色*/
                background-color: black;
                /*角度*/
                border-radius: 10%;
            }
            29%{
                background-color: orange;
                border-radius: 20%;
            }
            70%{
                background-color: yellow;
                border-radius: 30%;
            }
            /*结束帧,第二帧*/
            100% {
                /*
                 translate(900px)：结束位置
                 rotate(360deg)：以旋转360度滚动方式向右滚动
                */
                transform: translate(900px) rotate(360deg);
                /*到最后一帧布局是红色*/
                background-color: purple;
                /*延迟时间*/
                animation-delay: 0.5s;
                /*角度，最后变成圆球*/
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>

</body>
<div class="outer">
    <div class="inner"></div>
</div>
</html>